<template>
	<div class="centercomtsdiv commdiv">
		<div class="center_top">
			<!-- 顶部数字跳跃 -->
			<div class="ct_top_roll">
				<rollNum :ObjectNum="titleData.toDayChargeNum"></rollNum>
				<rollNum :ObjectNum="titleData.toDayChargePower"></rollNum>
				<rollNum :ObjectNum="titleData.currentChageWater"></rollNum>
				<rollNum :ObjectNum="titleData.totalChageTimes"></rollNum>
				<rollNum :ObjectNum="titleData.totalChagePower"></rollNum>
				<rollNum :ObjectNum="titleData.totalChageCar"></rollNum>
			</div>
			<!-- 状态列表 -->
			<div class="statusdiv">
				<div class="statusones" v-for="item in statusNum">
					<span class="ruanqiu" :style="{ background: item.statusColor }"></span>
					<span class="ruanqiutitle">{{ item.statustitle }} （{{ item.statusNum }}）</span>
				</div>
			</div>
			<!-- 地图 -->
			<div class="mapdiv">
				<!-- <div id="china"></div> -->
				<ctditu :dituData="dituData"></ctditu>

				<!-- 地图右侧上 -->
				<div class="mapleft">
					<div class="mapleft_top">
						<div class="maptop_title">城市充电量TOP 10</div>
						<div class="tags"><el-tag :class="{ selectname: typeToptime == 0 }"
								@click="typetimeTopfunt(0)">今日</el-tag><el-tag class="tagsright"
								:class="{ selectname: typeToptime == 1 }" @click="typetimeTopfunt(1)">累计</el-tag></div>

						<div class="mapCharging">
							<div class="mapchargOnes spcice">
								<span class="xuhao"></span> <span class="cityname">城市</span>
								<span class="chargnum">充电量/度</span>
							</div>
							<div class="mapchargOnesfordiv" v-for="(item, index) in allCityVO" :key="index">
								<div class="mapchargOnes">
									<span class="xuhao">
										<span class="avatardiv" :style="getBackgroundStyle(index)"> {{ index + 1
										}}</span>
									</span>
									<span class="cityname">{{ item.cityName }}</span>
									<span class="chargnum">{{ item.cityCapacity }}</span>
								</div>
								<a-progress :stroke-color="'#46a6ff'"
									:percent="(item.cityCapacity / allCityVO[0].cityCapacity) * 100" size="small"
									status="active" style="height: 3px; width: 100%" />
							</div>
						</div>
						<div class="mapleft_botm"></div>
					</div>
				</div>
				<!-- 地图右侧下 -->
				<div class="mapRightBottom">
					<div class="mRBtop" :style="{ backgroundImage: `url(${yujing2})` }">
						<div>
							<img src="/@/assets/images/yujing.svg" alt="" />
							<span style="font-weight: 300">实时充电预警</span>
						</div>
						<span class="mRBtopspan2">2</span>
					</div>
					<div class="mRbbottom" :style="{ backgroundImage: `url(${yujing3})` }">
						<p class="mRbbottomp1">
							<span>时间：</span>
							<span>2024-6-28 09:38:47</span>
						</p>
						<p class="mRbbottomp2">
							<span>地点：</span>
							<span>撒打算大范甘迪风娃娃啊实打实大</span>
						</p>
					</div>
				</div>
			</div>
		</div>
		<!-- 中下 -->
		<div class="ct_btm">
			<div class="ct_btm_left">
				<div class="comtitle">充电趋势分析</div>
				<div class="comtitlejiao">
					<div class="ct_btm_leftout">
						<div class="ct_btm_lt_top">
							<span :class="{ selectname: typetime == 0 }" @click="typetimefunt(0)">今日</span>
							<span :class="{ selectname: typetime == 1 }" @click="typetimefunt(1)">近30天</span>
							<span :class="{ selectname: typetime == 2 }" @click="typetimefunt(2)">近12月</span>
						</div>
						<!-- <div id="ct_btm_echarts" :style="{ width: '100%', height: '182rem' }"></div> -->
						<ctlineEcharts :chartData="ctlineEchartsData" :echartType="echartType"></ctlineEcharts>
					</div>
				</div>
			</div>
			<div class="ct_btm_right">
				<div class="ct_btm_right_top">
					实时充电订单
					<span class="ct_btm_right_topspan"
						@click="gourl('/ChargingBehaviorAnalysis/ChargingOrderInquiry')">全部订单 <a-icon type="right" />
					</span>
				</div>
				<a-table class="custom-table-border" :columns="columns" :pagination="false"
					:data-source="currentOrderdata" bordered size="small" @resizeColumn="handleResizeColumn">
					<!-- <span slot="chargeStation"><a-icon type="smile-o" /> 版本:{{dataVersion1Num}}</span> -->
					<template #bodyCell="{ column, text, record, index }">
						<template v-if="column.key === 'serial'">
							{{ index + 1 }}
						</template>
						<template v-if="column.key === 'chongdianzhan'">
							<a class="stationname">{{ text }}</a>
						</template>
					</template>
					<!-- <template #xuhao="{ text }">
            <a>{{ text }}</a>
          </template> -->
				</a-table>
			</div>
		</div>
	</div>
</template>

<script>
import rollNum from './countTo.vue';
import yujing2 from './yujing2.svg';
import yujing3 from './yujing3.svg';
import ctditu from './ctditu.vue';
import ctlineEcharts from './ctlineEcharts2.vue';
import { getbcurrentOrder, getchargeCurve, getwarnCurve } from '@/api/screen/yewuapi.js';
export default {
	name: 'index',
	props: {
		centerdata: {
			type: Object,
			default: {},
			required: true,
		},
	},
	created() {
		// this.alldataMethods(this.centerdata);
	},
	methods: {
		getBackgroundStyle(index) {
			if (index === 0) return { backgroundImage: `url(/@/assets/images/1.svg)` };
			else if (index === 1) return { backgroundImage: `url(/@/assets/images/2.svg)` };
		},
	},
	components: {
		rollNum,
		ctditu,
		ctlineEcharts,
	},
	watch: {
		centerdata: {
			deep: true,
			immediate: true,
			handler(newVal, oldVal) {
				this.alldataMethods(newVal);
				this.newVal = newVal;
			},
		},
	},
	data() {
		return {
			newVal: '',
			typeToptime: 0,
			typetime: 0,
			ctlineEchartsData: [],
			yujing3: yujing3,
			yujing2: yujing2,
			allCityVO: [],
			titleData: {
				toDayChargeNum: {
					title: '今日充电次数',
					num: '0',
				},
				toDayChargePower: {
					title: '当日充电电量(度)',
					num: '0',
				},
				currentChageWater: {
					title: '实时充电功率 (千瓦)',
					num: '0',
				},
				totalChageTimes: {
					title: '累计充电总次数',
					num: '0',
				},
				totalChagePower: {
					title: '累计充电总电量 (万度)',
					num: '0',
				},
				totalChageCar: {
					title: '累计充电车辆数',
					num: '0',
				},
			},
			statusNum: [
				{
					statusColor: '#02718e',
					statustitle: '充电中',
					statusNum: 5,
					type: 'chargingStake',
				},
				{
					statusColor: '#97ea89',
					statustitle: '空闲',
					statusNum: 5,
					type: 'freeChargingStake',
				},
				{
					statusColor: '#ffbf90',
					statustitle: '故障',
					statusNum: 5,
					type: 'errStake',
				},
				{
					statusColor: '#ff86be',
					statustitle: '停机',
					statusNum: 5,
					type: 'stopStake',
				},
				{
					statusColor: '#9ca8b9',
					statustitle: '离线',
					statusNum: 5,
					type: 'offlineStake',
				},
			],

			columns: [
				{
					title: '序号',
					key: 'serial',
					width: 30,
					align: 'center',
				},
				{
					title: '充电站',
					dataIndex: 'chargeStation',
					key: 'chargeStation',
					ellipsis: true,
					width: 130,
					align: 'center',
					scopedSlots: { customRender: 'chargeStation' },
				},
				{
					title: '充电量/度',
					dataIndex: 'totalPower',
					width: 60,
					align: 'center',
				},
				{
					title: '充电时长/min',
					dataIndex: 'times',
					width: 80,
					align: 'center',
				},
			],
			currentOrderdata: [
				{
					key: '1',
					chargeStation: '海南儋州市怡心花园阿斯达四大',
					totalPower: '45.5',
					times: '56',
				},
				{
					key: '1',
					chargeStation: '海南儋州市怡心花园阿斯达四大',
					totalPower: '45.5',
					times: '56',
				},
				{
					key: '1',
					chargeStation: '海南儋州市怡心花园阿斯达四大',
					totalPower: '45.5',
					times: '56',
				},
				{
					key: '1',
					chargeStation: '海南儋州市怡心花园阿斯达四大',
					totalPower: '45.5',
					times: '56',
				},
				{
					key: '1',
					chargeStation: '海南儋州市怡心花园阿斯达四大',
					totalPower: '45.5',
					times: '56',
				},
			],
		};
	},
	created() { },
	mounted() { },
	methods: {
		alldataMethods(newVal) {
			// 驾驶舱地图头部信息
			this.titleData.toDayChargeNum.num = newVal.titleDataVO.toDayChargeNum;
			this.titleData.toDayChargePower.num = newVal.titleDataVO.toDayChargePower;
			this.titleData.currentChageWater.num = newVal.titleDataVO.currentChageWater;
			this.titleData.totalChageTimes.num = newVal.titleDataVO.totalChageTimes;
			this.titleData.totalChagePower.num = newVal.titleDataVO.totalChagePower;
			this.titleData.totalChageCar.num = newVal.titleDataVO.totalChageCar;
			// * 实时充电订单
			this.currentOrderdata = newVal.currentOrderVOList;
			// 充电趋势分析
			this.ctlineEchartsData = newVal.chargeCurveVO.todayTimeList;
			this.echartType = 0;
			this.dituData = newVal.assetsCityVOList;
			// 	{
			// 	statusColor: '#02718e',
			// 	statustitle: '充电中',
			// 	statusNum: 5,
			// },sss
			this.statusNum.forEach((element) => {
				element['statusNum'] = newVal.titleDataVO[element['type']];
			});
			this.allCityVO = newVal.allCityVO.capacityTotalList;
			console.log('this.allCityVO', this.allCityVO);
		},
		typetimeTopfunt(num) {
			this.typeToptime = num;
			switch (num) {
				case 0:
					this.allCityVO = this.newVal.allCityVO.capacityTodayList;
					break;
				case 1:
					this.allCityVO = this.newVal.allCityVO.capacityTotalList;
					break;
			}
		},
		typetimefunt(num) {
			this.typetime = num;
			switch (num) {
				case 0:
					this.ctlineEchartsData = this.newVal.chargeCurveVO.todayTimeList;
					this.echartType = 0;
					break;
				case 1:
					this.echartType = 1;
					this.ctlineEchartsData = this.newVal.chargeCurveVO.monthTimeList;
					break;
				case 2:
					this.echartType = 2;
					this.ctlineEchartsData = this.newVal.chargeCurveVO.yearTimeList;
					break;
			}
		},
		gourl(params) {
			this.$router.push({ path: params });
		},
		getchargeCurveApi() {
			getchargeCurve({ day: 0 }).then((res) => {
				console.log('getchargeCurveApi', res);
			});
		},
		getwarnCurveApi() {
			getwarnCurve({ day: 0 }).then((res) => {
				console.log('getwarnCurveApi', res);
			});
		},

		getBackgroundStyle(index) {
			const colorlist = ['#ff3217', '#ff4fa1', '#ff9447', '#ddcc0e', '#3e8ed9', '#ff3217', '#ff4fa1', '#ff9447', '#ddcc0e', '#3e8ed9'];
			return { backgroundColor: colorlist[index] };
		},
	},
};
</script>

<style lang="less" scoped>
@import '/@/assets/css/baseinit.css';
// 地图右侧

:deep(.ant-avatar-string) {
	opacity: 1 !important;
	margin-right: 2px !important;
	font-size: 12px;
}

:deep(.ant-progress) {
	transform: rotate(180deg);
}

:deep(.ant-progress-bg, .ant-progress-outer) {
	height: 3px !important;
}

:deep(.ant-progress-text) {
	display: none !important;
}

:deep(.ant-progress-inner) {
	background-color: #103dab !important;
}

:deep(.ant-progress-show-info .ant-progress-outer) {
	padding-right: calc(0em);
}

// 中间表格
:deep(.ant-progress-inner) {
	margin-top: -16px !important;
}

:deep(.ant-table-thead > tr > th) {
	padding: 8px 0px !important;
	line-height: 20px !important;
	color: rgb(125, 133, 144) !important;
}

:deep(.ant-table-tbody > tr > th) {
	padding: 8px 0px !important;
	line-height: 15px !important;
}

:deep(.ant-table table) {
	border-radius: 0;
}

:deep(.ant-table-tbody > tr > td) {
	border-color: #17468a !important;
	padding: 9.7px 8px !important;
}

:deep(.ant-table-thead > tr > th) {
	border-color: #17468a !important;
	border-radius: 0px !important;
}

:deep(.ant-table-container) {
	border-color: #17468a !important;
}

:deep(.ant-table-cell) {
	background-color: #010c2a !important;
	color: white !important;
}

:deep(.ant-table-container table > thead > tr) {
	border-radius: 0px !important;
}

:deep(.ant-table-content table) {
	border-top: 1px solid #17468a !important;
}

:deep(.ant-table-tbody) {
	background-color: #010c2a;
	color: white;
}

#china {
	width: 700px;
	height: 500px;
}

.centercomtsdiv {
	height: 100%;
	box-sizing: border-box;
	padding: 10px;
	background: #091633;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

.ct_top_roll {
	display: flex;
	justify-content: space-around;
}

.statusdiv {
	display: flex;
	align-items: center;
	margin: 12px 0px;

	.statusones {
		display: flex;
		justify-content: center;
		align-items: center;

		.ruanqiu {
			border-radius: 50%;
			width: 14px;
			height: 14px;
		}

		.ruanqiutitle {
			font-weight: 300;
			font-style: normal;
			font-size: 13px;
			color: rgba(255, 255, 255, 0.945);
			padding-left: 7px;
		}
	}
}

.selectname {
	background-image: url(@/assets/images/jsc/u135.svg);
	background-size: 100% 100%;
}

.mapdiv {
	width: 100%;
	height: 508px;
	position: relative;
}

.ct_btm {
	display: flex;
	justify-content: space-between;
	// margin-top: 3%;
	height: 330px;

	.ct_btm_left {
		width: 100%;

		.ct_btm_leftout {
			box-sizing: border-box;
			padding: 2px;

			:deep(.ct_btm_lt_top) {
				font-weight: 400;
				font-style: normal;
				color: #45a5ff !important;
				font-size: 14px;
				text-align: center;

				span {
					margin-left: 20px;
					cursor: pointer;
				}
			}
		}
	}

	.ct_btm_right {
		width: 378px;
		color: white;
		margin-left: 7px;

		.ct_btm_right_top {
			position: relative;
			width: 378px;
			height: 35px;
			font-size: 18px;
			font-weight: 600;
			line-height: 35px;
			background: inherit;
			background-color: rgba(242, 242, 242, 0.058823529411764705);
			border: 1px #4a5d82 solid;
			border-bottom: 0;
			text-align: center;

			:deep(.ct_btm_right_topspan) {
				cursor: pointer;
				position: absolute;
				right: 0;
				top: 0;
				font-weight: 300;
				font-style: normal;
				font-size: 14px;
				color: #45a5ff !important;
			}
		}

		:deep(.stationname) {
			cursor: pointer;
			color: #45a5ff !important;
		}
	}
}

.mapleft {
	position: absolute;
	top: 1px;
	right: 10px;
	color: white;
	width: 215px;
	border: 1px solid;
	border-width: 1px;
	border-style: solid;
	border-color: rgba(29, 53, 100, 1);
	background-color: rgba(12, 24, 45, 1);
	box-sizing: border-box;
	padding: 0px 12px;

	.maptop_title {
		font-weight: 400;
		font-style: normal;
		font-size: 18px;
		color: #ffffff;
		text-align: center;
		line-height: 22px;
		border-bottom: 1px solid #1d3564;
		box-sizing: border-box;
		padding-bottom: 4px;
		padding-top: 5px;
		color: rgb(29.53 0.1);
	}

	.tags {
		font-weight: 400;
		font-style: normal;
		font-size: 16px;
		color: rgb(70, 166, 255);
		cursor: pointer;
		text-align: center;
		margin-top: 5px;

		.tagsright {
			margin-left: 10px;
		}
	}

	.mapCharging {
		// margin-top: 25px;
	}

	.mapchargOnesfordiv {
		height: 41px;
	}

	.mapchargOnes {
		display: flex;
		justify-content: space-around;
		color: #7d8590;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: distribute;
		justify-content: space-between;
		align-items: center;
		font-weight: 300;
		font-style: normal;
		color: rgb(255, 255, 255);
		font-size: 16px;
		text-align: center;
		// margin-bottom: 9px;

		.xuhao {
			// width: 25px;
			text-align: left;
		}

		.avatardiv {
			width: 15px;
			height: 15px;
			border-radius: 50%;
			font-size: 12px;
			color: #fff;
			display: inline-block;
			line-height: 15px;
			text-align: center;
		}

		.cityname {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			flex: 1;
			text-align: center;
		}

		.chargnum {
			// width: 53px;
			text-align: right;
		}
	}

	.spcice span {
		font-weight: 300;
		font-style: normal;
		font-size: 15px;
		color: rgb(125, 133, 144);
		margin-top: 5px;
		margin-bottom: 5px;
	}
}

// 地图右下
.mapRightBottom {
	position: absolute;
	bottom: 0px;
	right: 10px;
	width: 19x;

	.mRBtop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: 600;
		font-size: 16px;
		color: #ffffff;
		text-align: left;
		background-size: 100%;

		width: 190px;
		height: 25px;

		img {
			width: 20px;
			height: 16px;
			margin: 0 4px;
		}

		.mRBtopspan2 {
			font-weight: 600;
			font-style: normal;
			font-size: 16px;
			color: rgb(240, 90, 45);
			margin-right: 15px;
		}
	}

	.mRbbottom {
		width: 190px;
		height: 54px;
		background-size: 100%;
		color: white;
		box-sizing: border-box;

		.mRbbottomp1,
		.mRbbottomp2 {
			box-sizing: border-box;
			display: flex;
			padding: 0 5px;
			/* justify-content: space-between; */
			align-items: center;
			margin-top: 3px;
			font-size: 12px;

			span:nth-of-type(2) {
				background: rgb(146, 55, 21);

				box-sizing: border-box;
				padding: 0px 5px;

				width: 70%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

		.mRbbottomp1 {
			margin-bottom: 4px;
			padding-top: 4px;
		}

		.mRbbttomp2 {
			display: flex;
			align-items: center;
		}
	}
}
</style>
